<template>
  <div id="crowdfunding" class="w">
    <div class="title-crowdfunding">
      <span></span>
      <h3>众筹活动</h3>
      <span></span>
    </div>
    <div v-if="!crowdfunding.data || crowdfunding.data.length === 0" class="no-crowdfunding">暂无众筹活动</div>
    <div v-else class="crowdfunding-list">
      <div
        v-for="(crowdfunding, index) in crowdfunding.data"
        :key="index"
        class="crowdfunding-item"
      >
        <div class="crowdfunding-top">
          <div class="crowdfunding-img">
            <img :src="crowdfunding.goods_sku.thumbnail" alt="图片">
          </div>
          <div class="crowdfunding-info">
            <div class="crowdfunding-title">
              <strong>
                {{ crowdfunding.goods_sku.goods_name }}
              </strong>
            </div>
            <div class="crowdfunding-progress">
              <el-progress :percentage="crowdfunding.price_percent_int > 100 ? 100 : crowdfunding.price_percent_int" :stroke-width="20" :format="() => formatProgressText(crowdfunding.price_percent_int)"/>
            </div>
            <div class="crowdfunding-price-box">
              <div class="crowdfunding-price">￥{{ crowdfunding.curr_price }}</div>
              <el-button class="crowdfunding-button" @click="toGoodsDetail(crowdfunding)">
                <span v-if="crowdfunding.front_status === 0">立即支持</span>
                <span v-else>查看详情</span>
              </el-button>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="crowdfunding-bottom">
          <div class="item1">已筹{{ crowdfunding.already_goods_count }}个商品</div>
          <div class="item2">已筹{{ crowdfunding.already_price }}元</div>
          <div class="item3">
            <span v-if="crowdfunding.front_status === 0">剩余{{ formatRemainTime(crowdfunding.remain_second) }}</span>
            <span v-else>已结束</span>
          </div>
        </div>
      </div>
    </div>
    <div class="crowdfunding-page">
      <el-pagination
        v-if="crowdfunding"
        @current-change="handleCurrentPageChange"
        :current-page.sync="crowdfunding.page_no"
        :page-size="crowdfunding.page_size"
        layout="total, prev, pager, next"
        :total="crowdfunding.data_total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as API_Crowdfunding from '@/api/crowdfunding'
import { Pagination } from 'element-ui'
import { Progress } from 'element-ui'
import { Divider } from 'element-ui'

Vue.use(Pagination)
Vue.use(Progress)
Vue.use(Divider)

export default {
  name: 'crowdfunding',
  head() {
    return {
      title: `众筹活动-${this.site.title}`
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      params: {
        page_no: 1,
        page_size: 10
      },
      crowdfunding: {}
    }
  },
  mounted() {
    this.GET_Crowdfunding()
  },
  methods: {
    /** 加载数据 */
    handleCurrentPageChange(page_no) {
      this.params.page_no = page_no
      this.GET_Crowdfunding()
    },
    /** 去众筹商品详情页 */
    toGoodsDetail(crowdfunding) {
      this.$router.push({ path: '/goods/' + crowdfunding.goods_id, query: { crowdfundingId: crowdfunding.id } })
    },
    /** 获取众筹活动列表 */
    GET_Crowdfunding() {
      API_Crowdfunding.getList(this.params).then(response => {
        this.crowdfunding = response
      })
    },
    getSkuList(val) {
      const _val = typeof val === 'string' ? JSON.parse(val) : val
      if (_val) {
        let _specs = []
        _val.forEach(elem => {
          _specs.push(elem.spec_value)
        })
        _specs = _specs.join('/')
        return _specs
      }
      return ''
    },
    formatProgressText(percent) {
      if (percent > 999) {
        percent = 999
      }
      return percent + '%'
    },
    formatRemainTime(second) {
      const days = Math.floor(second / 86400)
      const hours = Math.floor((second % 86400) / 3600)
      const minutes = Math.floor(((second % 86400) % 3600) / 60)
      const seconds = Math.floor(((second % 86400) % 3600) % 60)
      if (days > 0) {
        return days + '天'
      }
      if (hours > 0) {
        return hours + '小时'
      }
      if (minutes > 0) {
        return minutes + '分钟'
      }
      return seconds + '秒'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/color";
/deep/ .el-progress {
  .el-progress-bar {
    width: 94%;
    .el-progress-bar__inner {
      background: linear-gradient(to right, rgb(255, 153, 22), rgb(247, 76, 63))
    }
  }
  .el-progress__text{
    color: rgb(249, 93, 53);
    font-weight: 700;
  }
}
/deep/ .el-divider--horizontal{
  margin: 0;
  width: 550px;
  margin-left: 15px;
}
.title-crowdfunding {
  height: 35px;
  line-height: 1;
  margin: 20px auto;
  text-align: center;
  span {
    display: inline-block;
    width: 35px;
    height: 18px;
    background: url() 0 0 no-repeat;
    overflow: hidden;
    vertical-align: middle;
  }
  h3 {
    display: inline-block;
    margin: 0 5px;
    color: #111;
    font-size: 18px;
    line-height: 35px;
    vertical-align: middle;
  }
}
.crowdfunding-list {
  display: block;
  overflow: hidden;
}
.crowdfunding-item {
  position: relative;
  display: block;
  float: left;
  height: 245px;
  border: 1px solid #f2f2f2;
  background: #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .04);
  margin: 0 20px 20px 0;
  width: 580px;
  overflow: visible;
  border-radius: 20px;
  //&:nth-child(3n) {
  //  margin-right: 0;
  //}
  //&:hover .crowdfunding-img {
  //  transform: translateX(5px);
  //}
  .crowdfunding-top {
    height: 200px;
    .crowdfunding-img {
      float: left;
      //width: 170px;
      //height: 170px;
      margin: 15px;
      img {
        width: 170px;
        height: 170px;
        border-radius: 5%;
      }
    }
    .crowdfunding-info {
      position: relative;
      float: left;
      z-index: 2;
      width: 380px;
      height: 120px;
      padding: 10px 0 15px;
      color: #333;
      outline: 0;
      margin-top: 10px;
      .crowdfunding-title {
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font: 400 15px arial;
      }
      .crowdfunding-progress {
        width: 380px;
        color: rgba(51, 51, 51, 0.5);
      }
      .crowdfunding-price-box {
        .crowdfunding-price{
          float: left;
          margin-top: 50px;
          font-size: 28px;
          font-weight: 700;
        }
        .crowdfunding-button{
          width: 130px;
          height: 45px;
          float: left;
          margin-top: 38px;
          margin-left: 150px;
          color: rgb(221, 188, 154);
          background-color: rgb(26, 25, 25);
          border-radius: 35px;
          font-size: 22px;
          padding: 0;
        }

      }
      strong {
        display: inline-block;
        font: 400 22px arial;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .crowdfunding-bottom {
    margin: 12px 15px 0 15px;
    color: rgb(158, 147, 136);
    font-size: 18px;
    .item1 {
      width: 183px;
      float: left;
      text-align: left;
    }
    .item2 {
      width: 183px;
      float: left;
      text-align: center;
    }
    .item3 {
      width: 183px;
      float: left;
      text-align: right;
    }
  }

}
.no-crowdfunding {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 100px;
}
.crowdfunding-page {
  text-align: right;
  clear: both;
  padding: 20px 0;
}
</style>
